<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="box-card" style="width: 100%; height: 15%">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="keyword"
            placeholder="请输入内容查找"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSerach()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 弹出的模态框 -->
    <el-dialog
      style="text-align: center"
      title="编辑文章"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="formData">
        <el-form-item label="文章标题" label-width="70px">
          <el-input
            v-model="formData.articlesTitle"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章简介" label-width="70px">
          <el-input
            v-model="formData.articleSynopsis"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容" label-width="70px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 20 }"
            placeholder="请输入内容"
            v-model="formData.articlesContent"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="是否推荐" label-width="70px">
          <el-select
            v-model="formData.DisplayOrder"
            style="width: 25vw"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 表格数据 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="Id" width="60">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="作者" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.fromUsersName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文章标题" width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>文章标题: {{ scope.row.articleTitle }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.articleTitle }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="文章简介" width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>文章简介: {{ scope.row.articleSynopsis }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.articleSynopsis }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="文章内容" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p v-html="scope.row.articlesContent">
              文章内容: {{ scope.row.articlesContent }}
            </p>
            <div slot="reference" class="name-wrapper">
              <el-tag>详情</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="文章分类" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.articlesClassify }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="155">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { GetArticle, deleteId, updateArticles } from "../api/articles";
export default {
  data() {
    return {
      tableData: [],

      //模态框绑定的信息
      keyword: "",
      formData: {
        articlesTitle: "",
        articleSynopsis: "",
        articlesContent: "",
        DisplayOrder: "",
      },
      //模态框默认为不显示
      dialogFormVisible: false,
      //下拉框
      options: [
        {
          value: "0",
          label: "不推荐",
        },
        {
          value: "1",
          label: "推荐",
        },
      ],
    };
  },
  mounted() {
    GetArticle().then(({ data }) => {
      this.tableData = data.data.data;
      // console.log(data);
    });
  },
  methods: {
    //搜索
    handleSerach() {
      console.log(this.selectArticle);
      let params={
        Keyword:this.keyword
      }
      console.log(params);
      GetArticle(params).then(({ data }) => {
        console.log(data);
        this.tableData = data.data.data;
      });
    },
    //模态框确认的事件
    handSave() {
      // 判断有没有id 有id 则是更新
      updateArticles(this.formData.id, this.formData).then(() => {
        this.$message({
          showClose: true,
          message: "恭喜你，编辑成功",
          type: "success",
        });
        //替换掉更新的这一行
        GetArticle().then(({ data }) => {
          this.tableData = data.data.data;
        });
      });

      this.dialogFormVisible = false;
    },
    //编辑
    handleEdit(index, row) {
      //记录当前编辑行的下标，来实现前端页面的实时更新
      this.currentIndex = index;

      //点击编辑时将要编辑的行数据拉取过来
      this.formData.id = row.id;
      this.formData.articlesTitle = row.articleTitle;
      this.formData.articleSynopsis = row.articleSynopsis;
      this.formData.articlesContent = row.articlesContent;
      this.formData.DisplayOrder = 0;
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      //删除时执行的弹框
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
            center: true,
          });
          //根据id删除指定的行
          deleteId(row.id).then((data) => {
            console.log(data);
            //删除数据后重新拉取数据
            GetArticle().then(({ data }) => {
              this.tableData = data.data.data;
              console.log(data);
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            center: true,
          });
        });
    },
  },
};
</script>

<style>
.element.style {
  margin-left: 0px;
}

.el-dialog__footer {
  margin-right: 100px;
}

.el-dialog__body {
  align-content: center;
  justify-content: center;
  display: flex;
}
</style>